<template>
  <div class="majors-container">
    <!-- 统计卡片 -->
    <div class="stats-row fade-in">
      <div class="stat-card stat-card--primary" :class="{'hover-effect': isHovering === 1}" @mouseenter="isHovering = 1" @mouseleave="isHovering = 0">
        <div class="stat-card__title">总专业数</div>
        <div class="stat-card__value">{{ totalMajors }}</div>
        <i class="el-icon-reading stat-card__icon"></i>
        <div class="stat-card__chart">
          <div class="trend-line"></div>
        </div>
      </div>
      <div class="stat-card stat-card--success" :class="{'hover-effect': isHovering === 2}" @mouseenter="isHovering = 2" @mouseleave="isHovering = 0">
        <div class="stat-card__title">本科专业</div>
        <div class="stat-card__value">{{ undergraduateMajors }}</div>
        <i class="el-icon-notebook-2 stat-card__icon"></i>
        <div class="stat-card__chart">
          <div class="trend-line"></div>
        </div>
      </div>
      <div class="stat-card stat-card--warning" :class="{'hover-effect': isHovering === 3}" @mouseenter="isHovering = 3" @mouseleave="isHovering = 0">
        <div class="stat-card__title">硕士专业</div>
        <div class="stat-card__value">{{ masterMajors }}</div>
        <i class="el-icon-collection stat-card__icon"></i>
        <div class="stat-card__chart">
          <div class="trend-line"></div>
        </div>
      </div>
      <div class="stat-card stat-card--danger" :class="{'hover-effect': isHovering === 4}" @mouseenter="isHovering = 4" @mouseleave="isHovering = 0">
        <div class="stat-card__title">博士专业</div>
        <div class="stat-card__value">{{ doctorMajors }}</div>
        <i class="el-icon-trophy stat-card__icon"></i>
        <div class="stat-card__chart">
          <div class="trend-line"></div>
        </div>
      </div>
    </div>

    <!-- 搜索区域 -->
    <div class="advanced-search fade-in">
      <el-collapse v-model="activeCollapse">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="collapse-header">
              <i class="el-icon-search"></i>
              <span>高级搜索</span>
              <el-tag size="small" type="info" v-if="hasSearchConditions">已设置 {{ searchConditionsCount }} 个筛选条件</el-tag>
            </div>
          </template>
          <el-form :inline="true" :model="searchForm" class="search-form">
            <el-form-item label="高校名称">
              <el-select v-model="searchForm.universityId" placeholder="请选择高校" filterable>
                <el-option
                  v-for="item in universities"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学科名称">
              <el-select v-model="searchForm.discipline" placeholder="请选择学科名称" filterable>
                <el-option
                  v-for="item in disciplines"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学位">
              <el-select v-model="searchForm.degree" placeholder="请选择学位">
                <el-option label="本科" value="本科"></el-option>
                <el-option label="硕士" value="硕士"></el-option>
                <el-option label="博士" value="博士"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleSearch">
                <i class="el-icon-search" style="margin-right: 5px;"></i>查询
              </el-button>
              <el-button @click="resetSearch">
                <i class="el-icon-refresh" style="margin-right: 5px;"></i>重置
              </el-button>
              <el-button type="primary" @click="handleAdd">
                <i class="el-icon-plus" style="margin-right: 5px;"></i>新增专业
              </el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- 数据表格 -->
    <div class="table-container fade-in" style="background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);">
      <div class="table-header" style="margin-bottom: 20px;">
        <span style="font-size: 16px; font-weight: 600; color: #333;">
          <i class="el-icon-tickets" style="margin-right: 8px;"></i>专业列表
        </span>
      </div>
      <el-table 
        :data="tableData" 
        border 
        style="width: 100%"
        :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
        :row-class-name="tableRowClassName"
        v-loading="loading"
      >
        <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
        <el-table-column prop="universityName" label="高校名称" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="discipline" label="学科名称" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="major" label="专业名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="degree" label="学位" width="100" align="center">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.degree === '本科' ? 'success' : scope.row.degree === '硕士' ? 'warning' : 'danger'"
              size="mini"
            >
              {{ scope.row.degree }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button 
              size="mini" 
              type="primary" 
              plain
              @click="handleEdit(scope.row)"
              icon="el-icon-edit"
            >编辑</el-button>
            <el-button 
              size="mini" 
              type="danger" 
              plain
              @click="handleDelete(scope.row)"
              icon="el-icon-delete"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total">
        </el-pagination>
      </div>
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px">
        <el-form-item label="高校" prop="universityId">
          <el-select v-model="form.universityId" placeholder="请选择高校" filterable>
            <el-option
              v-for="item in universities"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学科名称" prop="discipline">
          <el-select v-model="form.discipline" placeholder="请选择学科名称" filterable @change="handleDisciplineChange">
            <el-option
              v-for="item in disciplines"
              :key="item.id"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业名称" prop="major">
          <el-select v-model="form.major" placeholder="请选择专业名称" filterable>
            <el-option
              v-for="item in majors"
              :key="item.id"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学位" prop="degree">
          <el-select v-model="form.degree" placeholder="请选择学位">
            <el-option label="本科" value="本科"></el-option>
            <el-option label="硕士" value="硕士"></el-option>
            <el-option label="博士" value="博士"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Majors',
  data() {
    return {
      universities: [], // 高校列表
      disciplines: [
        { id: 1, name: '哲学' },
        { id: 2, name: '经济学' },
        { id: 3, name: '法学' },
        { id: 4, name: '教育学' },
        { id: 5, name: '文学' },
        { id: 6, name: '历史学' },
        { id: 7, name: '理学' },
        { id: 8, name: '工学' },
        { id: 9, name: '农学' },
        { id: 10, name: '医学' },
        { id: 11, name: '管理学' },
        { id: 12, name: '艺术学' }
      ], // 学科列表
      majorsMap: {
        '哲学': [
          { id: 101, name: '哲学' },
          { id: 102, name: '逻辑学' },
          { id: 103, name: '宗教学' },
          { id: 104, name: '伦理学' }
        ],
        '经济学': [
          { id: 201, name: '经济学' },
          { id: 202, name: '经济统计学' },
          { id: 203, name: '国民经济管理' },
          { id: 204, name: '资源与环境经济学' },
          { id: 205, name: '商务经济学' },
          { id: 206, name: '能源经济' },
          { id: 207, name: '劳动经济学' },
          { id: 208, name: '经济工程' },
          { id: 209, name: '数字经济' },
          { id: 210, name: '财政学' },
          { id: 211, name: '税收学' },
          { id: 212, name: '国际税收' },
          { id: 213, name: '金融学' },
          { id: 214, name: '金融工程' },
          { id: 215, name: '保险学' },
          { id: 216, name: '投资学' },
          { id: 217, name: '金融数学' },
          { id: 218, name: '信用管理' },
          { id: 219, name: '经济与金融' },
          { id: 220, name: '精算学' },
          { id: 221, name: '互联网金融' },
          { id: 222, name: '金融科技' },
          { id: 223, name: '金融审计' },
          { id: 224, name: '国际经济与贸易' },
          { id: 225, name: '贸易经济' },
          { id: 226, name: '国际经济发展合作' }
        ],
        '法学': [
          { id: 301, name: '法学' },
          { id: 302, name: '知识产权' },
          { id: 303, name: '监狱学' },
          { id: 304, name: '科学社会主义与国际共产主义运动' },
          { id: 305, name: '中国共产党历史' },
          { id: 306, name: '社会学' },
          { id: 307, name: '社会工作' },
          { id: 308, name: '政治学与行政学' },
          { id: 309, name: '国际政治' },
          { id: 310, name: '外交学' },
          { id: 311, name: '思想政治教育' },
          { id: 312, name: '治安学' },
          { id: 313, name: '侦查学' },
          { id: 314, name: '边防管理' }
        ],
        '教育学': [
          { id: 401, name: '教育学' },
          { id: 402, name: '学前教育' },
          { id: 403, name: '特殊教育' },
          { id: 404, name: '教育技术学' },
          { id: 405, name: '体育教育' },
          { id: 406, name: '运动训练' },
          { id: 407, name: '社会体育指导与管理' },
          { id: 408, name: '运动人体科学' },
          { id: 409, name: '武术与民族传统体育' }
        ],
        '文学': [
          { id: 501, name: '汉语言文学' },
          { id: 502, name: '汉语言' },
          { id: 503, name: '汉语国际教育' },
          { id: 504, name: '中国少数民族语言文学' },
          { id: 505, name: '古典文献学' },
          { id: 506, name: '英语' },
          { id: 507, name: '俄语' },
          { id: 508, name: '德语' },
          { id: 509, name: '法语' },
          { id: 510, name: '西班牙语' },
          { id: 511, name: '翻译' },
          { id: 512, name: '商务英语' },
          { id: 513, name: '新闻学' },
          { id: 514, name: '广播电视学' },
          { id: 515, name: '广告学' },
          { id: 516, name: '编辑出版学' },
          { id: 517, name: '音乐学' },
          { id: 518, name: '作曲与作曲技术理论' },
          { id: 519, name: '音乐表演' },
          { id: 520, name: '绘画' },
          { id: 521, name: '雕塑' },
          { id: 522, name: '美术学' },
          { id: 523, name: '艺术设计学' },
          { id: 524, name: '艺术设计' },
          { id: 525, name: '舞蹈学' },
          { id: 526, name: '舞蹈编导' }
        ],
        '历史学': [
          { id: 601, name: '历史学' },
          { id: 602, name: '世界历史' },
          { id: 603, name: '考古学' },
          { id: 604, name: '文物与博物馆学' }
        ],
        '理学': [
          { id: 701, name: '数学与应用数学' },
          { id: 702, name: '信息与计算科学' },
          { id: 703, name: '物理学' },
          { id: 704, name: '应用物理学' },
          { id: 705, name: '化学' },
          { id: 706, name: '应用化学' },
          { id: 707, name: '生物科学' },
          { id: 708, name: '生物技术' },
          { id: 709, name: '天文学' },
          { id: 710, name: '地质学' },
          { id: 711, name: '地球化学' },
          { id: 712, name: '地理科学' },
          { id: 713, name: '资源环境与城乡规划管理' },
          { id: 714, name: '地理信息系统' },
          { id: 715, name: '地球物理学' },
          { id: 716, name: '大气科学' },
          { id: 717, name: '应用气象学' },
          { id: 718, name: '海洋科学' },
          { id: 719, name: '海洋技术' },
          { id: 720, name: '理论与应用力学' },
          { id: 721, name: '电子信息科学与技术' },
          { id: 722, name: '微电子学' },
          { id: 723, name: '光信息科学与技术' },
          { id: 724, name: '材料物理' },
          { id: 725, name: '材料化学' },
          { id: 726, name: '环境科学' },
          { id: 727, name: '生态学' },
          { id: 728, name: '心理学' }
        ],
        '工学': [
          { id: 801, name: '采矿工程' },
          { id: 802, name: '石油工程' },
          { id: 803, name: '材料科学与工程' },
          { id: 804, name: '材料成型及控制工程' },
          { id: 805, name: '机械工程' },
          { id: 806, name: '机械设计制造及其自动化' },
          { id: 807, name: '测控技术与仪器' },
          { id: 808, name: '能源与动力工程' },
          { id: 809, name: '新能源科学与工程' },
          { id: 810, name: '电气工程及其自动化' },
          { id: 811, name: '智能电网信息工程' },
          { id: 812, name: '电子信息工程' },
          { id: 813, name: '通信工程' },
          { id: 814, name: '自动化' },
          { id: 815, name: '机器人工程' },
          { id: 816, name: '计算机科学与技术' },
          { id: 817, name: '软件工程' },
          { id: 818, name: '土木工程' },
          { id: 819, name: '建筑环境与能源应用工程' },
          { id: 820, name: '水利水电工程' },
          { id: 821, name: '水文与水资源工程' },
          { id: 822, name: '测绘工程' },
          { id: 823, name: '遥感科学与技术' },
          { id: 824, name: '化学工程与工艺' },
          { id: 825, name: '制药工程' },
          { id: 826, name: '勘查技术与工程' },
          { id: 827, name: '资源勘查工程' },
          { id: 828, name: '采矿工程' },
          { id: 829, name: '矿物加工工程' },
          { id: 830, name: '航空航天工程' },
          { id: 831, name: '飞行器设计与工程' },
          { id: 832, name: '武器系统与工程' },
          { id: 833, name: '武器发射工程' },
          { id: 834, name: '核工程与核技术' },
          { id: 835, name: '辐射防护与核安全' },
          { id: 836, name: '农业工程' },
          { id: 837, name: '农业机械化及其自动化' },
          { id: 838, name: '森林工程' },
          { id: 839, name: '木材科学与工程' },
          { id: 840, name: '环境科学与工程' },
          { id: 841, name: '环境工程' },
          { id: 842, name: '生物医学工程' },
          { id: 843, name: '食品科学与工程' },
          { id: 844, name: '食品质量与安全' },
          { id: 845, name: '建筑学' },
          { id: 846, name: '城乡规划' },
          { id: 847, name: '安全工程' },
          { id: 848, name: '生物工程' },
          { id: 849, name: '生物制药' },
          { id: 850, name: '刑事科学技术' },
          { id: 851, name: '消防工程' }
        ],
        '农学': [
          { id: 901, name: '农学' },
          { id: 902, name: '园艺' },
          { id: 903, name: '植物保护' },
          { id: 904, name: '农业资源与环境' },
          { id: 905, name: '野生动物与自然保护区管理' },
          { id: 906, name: '动物科学' },
          { id: 907, name: '蚕学' },
          { id: 908, name: '动物医学' },
          { id: 909, name: '动物药学' },
          { id: 910, name: '林学' },
          { id: 911, name: '园林' },
          { id: 912, name: '水产养殖学' },
          { id: 913, name: '海洋渔业科学与技术' },
          { id: 914, name: '草业科学' }
        ],
        '医学': [
          { id: 1001, name: '基础医学' },
          { id: 1002, name: '临床医学' },
          { id: 1003, name: '麻醉学' },
          { id: 1004, name: '医学影像学' },
          { id: 1005, name: '口腔医学' },
          { id: 1006, name: '预防医学' },
          { id: 1007, name: '食品卫生与营养学' },
          { id: 1008, name: '中医学' },
          { id: 1009, name: '针灸推拿学' },
          { id: 1010, name: '中西医临床医学' },
          { id: 1011, name: '药学' },
          { id: 1012, name: '药物制剂' },
          { id: 1013, name: '中药学' },
          { id: 1014, name: '中药资源与开发' },
          { id: 1015, name: '法医学' },
          { id: 1016, name: '医学检验技术' },
          { id: 1017, name: '医学影像技术' },
          { id: 1018, name: '护理学' }
        ],
        '管理学': [
          { id: 1101, name: '管理科学' },
          { id: 1102, name: '信息管理与信息系统' },
          { id: 1103, name: '工商管理' },
          { id: 1104, name: '市场营销' },
          { id: 1105, name: '会计学' },
          { id: 1106, name: '农林经济管理' },
          { id: 1107, name: '农村区域发展' },
          { id: 1108, name: '公共事业管理' },
          { id: 1109, name: '行政管理' },
          { id: 1110, name: '图书馆学' },
          { id: 1111, name: '档案学' },
          { id: 1112, name: '物流管理' },
          { id: 1113, name: '物流工程' },
          { id: 1114, name: '工业工程' },
          { id: 1115, name: '电子商务' },
          { id: 1116, name: '旅游管理' },
          { id: 1117, name: '酒店管理' }
        ],
        '艺术学': [
          { id: 1201, name: '艺术史论' },
          { id: 1202, name: '音乐学' },
          { id: 1203, name: '舞蹈学' },
          { id: 1204, name: '戏剧学' },
          { id: 1205, name: '表演' },
          { id: 1206, name: '导演' },
          { id: 1207, name: '美术学' },
          { id: 1208, name: '绘画' },
          { id: 1209, name: '雕塑' },
          { id: 1210, name: '艺术设计学' },
          { id: 1211, name: '视觉传达设计' }
        ]
      }, // 所有专业映射表
      majors: [], // 当前选中学科的专业列表
      searchForm: {
        universityId: '',
        discipline: '',
        degree: ''
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false,
      dialogTitle: '新增专业',
      form: {
        universityId: '',
        discipline: '',
        major: '',
        degree: ''
      },
      rules: {
        universityId: [
          { required: true, message: '请选择高校', trigger: 'change' }
        ],
        discipline: [
          { required: true, message: '请选择学科名称', trigger: 'change' }
        ],
        major: [
          { required: true, message: '请选择专业名称', trigger: 'change' }
        ],
        degree: [
          { required: true, message: '请选择学位', trigger: 'change' }
        ]
      },
      totalMajors: 0,
      undergraduateMajors: 0,
      masterMajors: 0,
      doctorMajors: 0,
      loading: false, // 添加loading状态
      isHovering: 0,
      activeCollapse: ['1'],
    }
  },
  computed: {
    hasSearchConditions() {
      return this.searchForm.universityId || this.searchForm.discipline || this.searchForm.degree
    },
    searchConditionsCount() {
      return [this.searchForm.universityId, this.searchForm.discipline, this.searchForm.degree]
        .filter(Boolean).length
    }
  },
  created() {
    this.fetchUniversities()
    this.fetchData()
  },
  watch: {
    // 监听搜索表单中的学科变化
    'searchForm.discipline': function(val) {
      if (val && this.form.discipline === val) {
        // 如果搜索表单和编辑表单中的学科相同，则更新专业列表
        this.majors = this.majorsMap[val] || []
      }
    }
  },
  methods: {
    // 获取高校列表
    async fetchUniversities() {
      try {
        const res = await this.$axios.get('/academicPrograms/university/all')
        this.universities = res.data
      } catch (error) {
        this.$message.error('获取高校列表失败')
      }
    },
    // 学科变更时获取对应的专业列表
    handleDisciplineChange(val) {
      this.form.major = ''
      this.majors = []
      if (!val) return
      
      // 直接从前端数据中获取专业列表
      this.majors = this.majorsMap[val] || []
    },
    // 计算统计数据
    calculateStats() {
      this.totalMajors = this.pagination.total || 0
      this.undergraduateMajors = this.tableData.filter(item => item.degree === '本科').length
      this.masterMajors = this.tableData.filter(item => item.degree === '硕士').length
      this.doctorMajors = this.tableData.filter(item => item.degree === '博士').length
    },
    // 表格行的类名
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 === 1) {
        return 'stripe-row';
      }
      return '';
    },
    // 获取数据
    async fetchData() {
      this.loading = true
      try {
        const params = {
          page: this.pagination.currentPage,
          size: this.pagination.pageSize,
          universityId: this.searchForm.universityId,
          discipline: this.searchForm.discipline,
          degree: this.searchForm.degree
        }
        const res = await this.$axios.get('/academicPrograms/academic/list', { params })
        this.tableData = res.data.records
        this.pagination.total = res.data.total
        this.calculateStats()
      } catch (error) {
        this.$message.error('获取数据失败')
      } finally {
        this.loading = false
      }
    },
    // 搜索
    handleSearch() {
      this.pagination.currentPage = 1
      this.fetchData()
    },
    // 重置搜索
    resetSearch() {
      this.searchForm = {
        universityId: '',
        discipline: '',
        degree: ''
      }
      this.handleSearch()
    },
    // 新增
    handleAdd() {
      this.dialogTitle = '新增专业'
      this.form = {
        universityId: '',
        discipline: '',
        major: '',
        degree: ''
      }
      this.majors = [] // 清空专业列表
      this.dialogVisible = true
    },
    // 编辑
    handleEdit(row) {
      this.dialogTitle = '编辑专业'
      this.form = { ...row }
      // 加载对应学科的专业列表
      this.handleDisciplineChange(row.discipline)
      this.dialogVisible = true
    },
    // 删除
    handleDelete(row) {
      this.$confirm('确认删除该专业信息吗？', '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          await this.$axios.delete(`/academicPrograms/academic/delete/${row.id}`)
          this.$message.success('删除成功')
          this.fetchData()
        } catch (error) {
          this.$message.error('删除失败')
        }
      }).catch(() => {})
    },
    // 提交表单
    handleSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            if (this.form.id) {
              // 编辑
              await this.$axios.put('/academicPrograms/academic/update', this.form)
              this.$message.success('更新成功')
            } else {
              // 新增
              await this.$axios.post('/academicPrograms/academic/add', this.form)
              this.$message.success('添加成功')
            }
            this.dialogVisible = false
            this.fetchData()
          } catch (error) {
            this.$message.error(error.message || '操作失败')
          }
        }
      })
    },
    // 分页
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.fetchData()
    }
  }
}
</script>

<style scoped>
.majors-container {
  padding: 24px;
  background: #f5f7fa;
  min-height: calc(100vh - 48px);
}

.search-form {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.search-form .el-form-item {
  margin-bottom: 18px;
}

.search-form .el-select {
  width: 240px;
}

.search-form .el-button {
  padding: 12px 20px;
  font-weight: 500;
}

.search-form .el-button + .el-button {
  margin-left: 12px;
}

.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}

.el-table::before {
  display: none;
}

.el-table th {
  background: #f5f7fa !important;
  color: #333;
  font-weight: 600;
  padding: 12px 0;
}

.el-table td {
  padding: 12px 0;
}

.el-table .el-button--mini {
  padding: 7px 15px;
}

.pagination {
  margin-top: 24px;
  padding: 16px 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.el-dialog {
  border-radius: 8px;
  overflow: hidden;
}

.el-dialog__header {
  background: #f5f7fa;
  padding: 20px 24px;
  margin: 0;
}

.el-dialog__title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.el-dialog__body {
  padding: 24px;
}

.el-dialog__footer {
  padding: 16px 24px;
  background: #f5f7fa;
  border-top: 1px solid #e4e7ed;
}

.el-dialog .el-form-item {
  margin-bottom: 24px;
}

.el-dialog .el-select {
  width: 100%;
}

.el-dialog .el-button {
  padding: 12px 20px;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.stat-card__title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-card__value {
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.stat-card__icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  opacity: 0.1;
}

.stat-card--primary {
  background: linear-gradient(135deg, #409eff, #3a8ee6);
}

.stat-card--success {
  background: linear-gradient(135deg, #67c23a, #5daf34);
}

.stat-card--warning {
  background: linear-gradient(135deg, #e6a23c, #cf9236);
}

.stat-card--danger {
  background: linear-gradient(135deg, #f56c6c, #dd6161);
}

.stat-card--primary .stat-card__title,
.stat-card--success .stat-card__title,
.stat-card--warning .stat-card__title,
.stat-card--danger .stat-card__title,
.stat-card--primary .stat-card__value,
.stat-card--success .stat-card__value,
.stat-card--warning .stat-card__value,
.stat-card--danger .stat-card__value {
  color: #fff;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.stripe-row {
  background-color: #fafafa;
}

.el-table .el-button {
  padding: 7px 12px;
}

.el-table .el-button + .el-button {
  margin-left: 8px;
}

.el-tag {
  font-weight: 500;
}

.el-tag--success {
  background-color: #f0f9eb;
}

.el-tag--warning {
  background-color: #fdf6ec;
}

.el-tag--danger {
  background-color: #fef0f0;
}

.el-button [class*="el-icon-"] + span {
  margin-left: 5px;
}

.el-dialog .el-form-item__label {
  font-weight: 500;
}

.el-form-item__content .el-select {
  width: 100%;
}

.el-pagination {
  padding: 0;
  margin: 0;
}

.el-pagination .el-select .el-input {
  margin: 0 5px;
}

.el-pagination .el-pagination__total {
  margin-right: 10px;
}

.el-pagination .el-pagination__jump {
  margin-left: 10px;
}

.advanced-search {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.collapse-header {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.collapse-header i {
  margin-right: 8px;
  color: #409EFF;
}

.collapse-header .el-tag {
  margin-left: 16px;
}

.stat-card {
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.hover-effect {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.stat-card__chart {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  opacity: 0.2;
  overflow: hidden;
}

.trend-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 25%, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.2) 75%, transparent 75%);
  background-size: 20px 20px;
  animation: moveLines 20s linear infinite;
}

@keyframes moveLines {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

.el-table {
  transition: all 0.3s ease;
}

.el-table:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.el-table th {
  background: linear-gradient(to right, #f5f7fa, #f8f9fb) !important;
}

.el-pagination {
  transition: all 0.3s ease;
}

.el-pagination:hover {
  transform: translateY(-2px);
}

.el-dialog {
  transition: all 0.3s ease;
}

.el-dialog__header {
  position: relative;
  overflow: hidden;
}

.el-dialog__header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #409EFF, #36cfc9);
}

.el-form-item {
  transition: all 0.3s ease;
}

.el-form-item:hover {
  transform: translateX(5px);
}

.el-select-dropdown__item {
  transition: all 0.3s ease;
}

.el-select-dropdown__item.hover {
  background: linear-gradient(to right, #f5f7fa, #f8f9fb);
  transform: translateX(5px);
}

.el-button {
  position: relative;
  overflow: hidden;
}

.el-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255,255,255,0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.el-button:hover::after {
  animation: ripple 1s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(20, 20);
    opacity: 0;
  }
}
</style> 